<template>
  <el-container>
    <div class="header">
      <span class="mid-span">BestWish</span>
    </div>
    <div class="wish-thing">
      <span class="count">已有{{ count }}个愿望啦</span
      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button
        type="primary"
        icon="el-icon-magic-stick"
        @click="dialogFormVisible = true"
        >许个愿吧</el-button
      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input
        v-model="input"
        type="text"
        maxlength="10"
        show-word-limit
        placeholder="请输入署名"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchWish(input)"
        >找我的愿望</el-button
      >
    </div>
    <el-main>
      <div class="main">
        <div class="wall">
          <div
            class="wish"
            v-for="(k, index) in wishs"
            :key="index"
            ref="nodes"
          >
            <div class="curcles">
              <div class="curle"></div>
              <div class="curle"></div>
              <div class="curle"></div>
            </div>
            <div class="context">
              <div>
                <span class="title-count">第{{ k.id }}条</span>
                <span class="title-time">{{ k.time }}</span>
              </div>
              <div>
                <span class="title-text">{{ k.text }}</span>
              </div>
              <div>
                <span class="title-name">{{ k.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog title="写下你的愿望吧" :visible.sync="dialogFormVisible">
        <el-input
          v-model="wish.text"
          placeholder="输入你的愿望吧"
          type="textarea"
          maxlength="100"
          show-word-limit
          size="medium"
          :autosize="{ minRows: 3, maxRows: 3 }"
        ></el-input>
        <div class="wishName">
          <el-input
            id="wishName"
            v-model="wish.name"
            placeholder="署名"
            type="text"
            maxlength="5"
            show-word-limit
          ></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="makeWish(wish.text,wish.name)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-main>
    <el-footer>
      <span>BestWish@mikey版权所有</span>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "BestWish",
  data() {
    return {
      input: "",
      count: "",
      color: ["#e8ddff", "#ffffd0", "#ffdfff", "#ffcece", "#c4fec2", "#ffcece"],
      wishs: [
        {
          id: "",
          time: "",
          text: "",
          name: "",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      wish:[{
        text:'',
        name:''
      }],
    };
  },
  mounted() {
    this.initDate();
  },
  methods: {
    async initColor() {
      for (let index = 0; index < 9; index++) {
        var i = Math.floor(Math.random() * this.color.length);
        this.$refs.nodes[index].style.background = this.color[i];
      }
    },
    async makeWish(text,name) {
      if (text != "" || name != "") {
        this.dialogFormVisible = false;
        const res=await this.$API.makeWish(text,name)
        if(res.status==10000){
          alert("许愿成功啦！")
        }
        this.wish.name = "";
        this.wish.text = "";
        return;
      }
      alert("愿望和署名不能为空噢");
    },
    async searchWish(input) {
      if (input == "") {
        alert("署名不能为空噢！");
        return;
      }
      const res=await this.$API.searchWish(input)
      if(res.status==10000){
        if(res.data.length==0){
          alert("没找到你的愿望哦")
          return
        }
        this.wishs=res.data.slice(0,8)
      }
    },
    async initDate() {
      const result = await this.$API.initDate();
      if (result.status == 10000) {
        this.count = result.data.length;
        this.wishs = result.data.reverse().slice(0,8);
        this.$nextTick(() => {
          this.initColor();
        });
      }
    },
  },
};
</script>

<style>
.el-container {
  height: 100%;
  width: 100%;
}
.header {
  position: absolute;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409eff;
  border: 1px solid #ffdde3;
  background-color: #FFDEE9;
  background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

}
.mid-span {
  font-size: 30px;
}
.el-main {
  height: 750px;
  width: 100%;
  background-color: #ffdde3;
}
.left img {
  max-width: 100%;
  max-height: 100%;
}
.wish-thing {
  display: flex;
  margin-top: 100px;
  height: 50px;
  align-items: center;
  justify-content: center;
  background-color: #ffdde3;
}
.el-button {
  height: 40px;
}
.el-input {
  width: 140px;
}
.main {
  display: flex;
  justify-content: center;
}
.wall {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  width: 900px;
  height: 60px;
  background-color: #fff;
}
.wish {
  margin-top: 0%;
  left: 40%;
  width: 225px;
  height: 300px;
  background-color: #ffdfff;
}
.curcles {
  display: flex;
}
.curle {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  margin-left: 25px;
}
.context {
  padding: 5px;
}
.title-count {
  position: relative;
}
.title-time {
  position: relative;
  left: 10px;
}
.title-text {
  position: relative;
  top: 20%;
}
.title-name {
  position: relative;
  left: 70%;
  bottom: 5%;
}
.el-dialog {
  background-color: #ffdde3;
}
.el-input {
  background-color: #ffdde3;
}
.wishName {
  margin-left: 70%;
}
.el-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #e6eaf0;
  color: #333;
  text-align: center;
  line-height: 60px;
}
</style>